<template>
	<view class="content">
		<image class="logo" :src="logo" @click="toggleSleepLogo"></image>
		<text class="text-area"> {{tittle}}</text>
		<view class="ring" @click="toggleSleep">
			<clock :message="message"></clock>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				logoIndex: 0,
				tittle: '太棒了，点击立即开始睡眠...',
				isSleep: false,
				message: "要睡觉啦",
				logo: "../../static/great.png",
				insleepTime: "",
				insleepTimeMillion: ""
			}
		},
		onLoad() {
			if (this.isSleep) {
				this.updateTittle();
				this.interval = setInterval(this.updateTittle, 1000);
				console.log('创建定时器home onLoad')
			}


		},
		onHide: function() {
			console.log('定时器销毁home Hide' + this.interval)
			clearInterval(this.interval);
		},
		onShow: function() {
			if (this.isSleep) {
				console.log('创建定时器home onShow')
				this.updateTittle();
				this.interval = setInterval(this.updateTittle, 1000);
			}

		},
		methods: {
			toggleSleepLogo: function() {
				if (this.isSleep) {
					let logoArr = [
						"../../static/sleep1.png",
						"../../static/sleep2.png",
						"../../static/sleep3.png",
						"../../static/sleep4.png"
					];
					this.logoIndex = this.logoIndex + 1;
					let currentIndex = (this.logoIndex) % logoArr.length;
					this.logo = logoArr[currentIndex];
				}

			},
			toggleSleep: function() {
				uni.showModal({
					title: this.isSleep ? '🎉唤醒成功🎉' : '🎉哄睡成功🎉',
					content: this.isSleep ? '👶已经醒来，开始新的一天吧🌞' : '👶已经进入梦乡，放松一下吧🥂',
					showCancel: false,
				});
				this.isSleep = !this.isSleep;
				this.updateMessage();
				this.updateLogo();
				this.updateTittle();
			},

			updateMessage() {
				this.message = this.isSleep ? "睡起来了" : "要睡觉啦";

			},
			updateLogo() {
				this.logo = this.isSleep ? "../../static/sleep1.png" : "../../static/great.png";
			},
			updateTittle() {
				console.log("updateTittle....")
				if (this.isSleep) {
					console.log("当前页面定时器" + this.interval);
					if (this.interval == undefined) {
						console.log("开始创建定时器");
						this.interval = setInterval(this.updateTittle, 1000);

					}
					let now = new Date();
					if (this.insleepTimeMillion === "") {
						this.insleepTimeMillion = now;
						let hours = now.getHours().toString().padStart(2, '0');
						let minutes = now.getMinutes().toString().padStart(2, '0');
						let seconds = now.getSeconds().toString().padStart(2, '0');
						this.insleepTime = `${hours}:${minutes}:${seconds}`
					} else {
						//获取入睡时间和当前时间的差
						let diffInMilliseconds = now - this.insleepTimeMillion;
						let hours = Math.floor(diffInMilliseconds / (1000 * 60 * 60));
						let minutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
						let seconds = Math.floor((diffInMilliseconds % (1000 * 60)) / 1000);
						hours = hours.toString().padStart(2, '0');
						minutes = minutes.toString().padStart(2, '0');
						seconds = seconds.toString().padStart(2, '0');
						this.tittle =
							"入睡时间 : " + this.insleepTime +
							"\r\n" +
							"已经睡了 : " + hours + ":" + minutes + ":" + seconds;

					}
				} else {
					console.log("结束睡眠, 定时器销毁");
					clearInterval(this.interval);
					this.interval = undefined;
					this.tittle = "太棒了，点击立即开始睡眠...";
					this.insleepTime = "";
					this.insleepTimeMillion = "";
				}


			}
		},


	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.text-area {
			font-size: 20px;
			font-weight: bold;
			color: seagreen;
			justify-content: center;
		}

		.ring {
			width: 125px;
			height: 125px;
			border: 8px solid #f1b80a;
			border-radius: 50%;
			position: absolute;
			bottom: 20%;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>